
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="height=device-height,user-scalable=no,initial-scale=0.8,maximum-scale=0.8,minimum-scale=0.8">
  <title> Material Icon Shadow Color Picker</title>
 <link href="css/M+PLUS+Rounded+1c.css" rel="stylesheet"><link rel="stylesheet" href="css/style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<body>
    <div id="confirmcopy">
        <div>
            CODE COPIED ;)
        </div>
    </div>
    <div class="copycontainer innie">
        <span id="copydrawer">GET CODE</span>
        <div id="copyhtml" class="clippy" data-clipboard-target="#htmlcode">
            <i class="material-icons">
                code
            </i>
            copy html
        </div>
        <div id="copycss" class="clippy" data-clipboard-target="#csscode">
            <i class="material-icons">
                style
            </i>
            copy css
        </div>
    </div>
    <div id="container">
        <div id="colorpicker">

        </div>
        <div id="example">
            <div id="bgcolorvalue">
                <div id="bgtitle">Red 500</div>
                <div id="bghextitle">#FFGG78</div>
            </div>
            <div id="circle">
                <i id="icon" class="material-icons">
                    favorite
                </i>
            </div>
            <div id="shadcolorvalue">
                <div id="shadowtitle">Red 500</div>
                <div id="shadowhextitle">#FFGG78</div>
            </div>
        </div>
    </div>



    <textarea id="htmlcode" readonly>html</textarea>
    <textarea id="csscode" readonly>css</textarea>
</body>
<!-- partial -->
  <script src='js/clipboard.min.js'></script><script  src="js/script.js"></script>

</body>
</html>
